<template>
    <div  v-if="configData">
        <div class="numbox">
            <div class="c_row-item">
        <Col class="label" span="4">
            <span>{{ configData.widthTitle }}</span>
        </Col>
        <Col span="6" class="slider-box">
            <Input v-model="configData.width" type="number" disabled placeholder="请输入" style="text-align: right;"/>
        </Col>
          <Col class="label" :span="4">
            <span>{{ configData.heightTitle }}</span>
        </Col>
        <Col span="6" class="slider-box">
            <Input v-model="configData.height" type="number" disabled placeholder="请输入" style="text-align: right;"/>
        </Col>
        </div>
        </div>
          <div class="numbox">
            <div class="c_row-item">
        <Col class="label" span="4">
            <span>{{ configData.leftTitle }}</span>
        </Col>
        <Col span="6" class="slider-box">
            <Input v-model="configData.left" type="number" disabled placeholder="请输入" style="text-align: right;"/>
        </Col>
          <Col class="label" :span="4">
            <span>{{ configData.topTitle }}</span>
        </Col>
        <Col span="6" class="slider-box">
            <Input v-model="configData.top" type="number" disabled placeholder="请输入" style="text-align: right;"/>
        </Col>
        </div>
        </div>
    </div>
</template>

<script>
    /*
    * 右侧属性组件布局：宽、高、左、上
    */
    export default {
        name: 'c_layout_input_number',
        props: {
            configObj: {
                type: Object
            },
            configNme: {
                type: String
            }
        },
        data () {
            return {
                defaults: {},
                sliderWidth: 0,
                configData: {}
            }
        },
        created () {
            this.defaults = this.configObj
            this.configData = this.configObj[this.configNme]
        },
        watch: {
            configObj: {
                handler (nVal, oVal) {
                    this.defaults = nVal
                    this.configData = nVal[this.configNme]
                },
                immediate: true,
                deep: true
            }
        }
    }
</script>

<style scoped lang="stylus">
    .numbox
        display flex
        align-items center
        margin-bottom 10px
        span
            width 80px
            color #999
            /*font-size 12px*/
    .c_row-item
        width 100%
</style>
